<template>
  <div>
    <form-marker
      :isEdit="isEditPage" 
      :formData="list" 
      :rulesList="rules"
      :isShowTitle="isShow"
      :selectList="selectData"
      :eidtList="detailData"
      v-on:on-address="onchangeAddress"
      v-on:on-confirm="onSaveInfo" 
      v-on:on-cancel="onCancelInfo"></form-marker>
  </div>
</template>
<script>
import FormMarker from '@/components/createPage/createMarker'
import {isPhone} from '@/common/utils'
import {cloneDeep} from 'lodash'
export default {
  components: {
    FormMarker
  },
  data () {
    // 自定义验证规则
    let checkProviderCode = (rule, value, callback) => {
      if (value && this.pageType === 'new') {
        this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mvendors/check`, {itemNo: value}).then((res) => {
          if (res.result) {
            // this.noRepeat = res.data // res.data.data [false]有重复/【true】无重复
            if (!res.data) {
              callback(new Error('编码已存在，请重新输入'))
            } else {
              callback()
            }
          }
        })
      } else {
        callback()
      }
    }
    // 验证address
    let onCheckAddress = (rule, value, callback) => {
      if (this.checkAddress && this.checkAddress.provinceName && this.checkAddress.cityName && this.checkAddress.countyName) {
        callback()
      } else if (this.pageType !== 'new') {
        callback()
      } else {
        callback(new Error('地址不允许为空'))
        // callback(new Error('省-市-县区-不允许为空'))
      }
    }
    // 验证联系电话
    // 验证联系电话
    let onCheckPhone = (rule, value, callback) => {
      if (!isPhone(value)) {
        callback(new Error('请输入正确格式的联系电话'))
      } else {
        callback()
      }
    }
    return {
      list: [
        {
          type: 'input',
          label: '供应商编码',
          name: '供应商编码',
          prop: 'itemNo',
          isDisable: true
        },
        {
          type: 'input',
          label: '供应商名称',
          name: '供应商编码',
          prop: 'name'
        },
        {
          type: 'input',
          label: '统一社会信用代码',
          name: '统一社会信用代码',
          prop: 'socialCreditCode'
        },
        {
          type: 'selectProvince',
          label: '默认提货地址',
          name: '默认提货地址',
          prop: 'address',
          child: [
            {
              type: 'select',
              name: '省',
              prop: 'provinceName'
            },
            {
              type: 'select',
              name: '市',
              prop: 'cityName'
            },
            {
              type: 'select',
              name: '区县',
              prop: 'countyName'
            }
          ]
        },
        {
          type: 'input',
          name: '详细地址',
          prop: 'street'
        },
        {
          type: 'input',
          label: '联系人',
          name: '联系人',
          prop: 'contactName'
        },
        {
          type: 'input',
          label: '联系电话',
          name: '联系电话',
          prop: 'contactPhone'
        },
        {
          type: 'remit',
          label: '常用打款人',
          name: '常用打款人',
          prop: 'accontName',
          add: true,
          localIndex: 1
        },
        {
          type: 'remit',
          label: '开户银行',
          name: '开户银行',
          prop: 'bank',
          localIndex: 1
        },
        {
          type: 'remit',
          label: '银行账户',
          name: '开户银行',
          prop: 'account',
          localIndex: 1
        }
      ],
      rules: {
        itemNo: [
          { max: 32, message: '长度不可超过32个字符', trigger: 'change' },
          { required: true, message: '供应商编码不允许为空', trigger: 'change' },
          { validator: checkProviderCode, trigger: 'change' }
        ],
        socialCreditCode: [
          { max: 32, message: '长度不可超过32个字符', trigger: 'blur' },
          { required: true, message: '统一社会信用代码不允许为空', trigger: 'blur' }
        ],
        address: [
          { required: true, validator: onCheckAddress, trigger: 'change' }
        ],
        street: [
          { max: 128, message: '长度不可超过128个字符', trigger: 'blur' },
          { required: true, message: '详细地址不允许为空', trigger: 'blur' }
        ],
        contactName: [
          { max: 64, message: '长度不可超过64个字符', trigger: 'blur' },
          { required: true, message: '联系人不允许为空', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '联系电话不允许为空', trigger: 'blur' },
          { max: 20, message: '长度不可超过20个字符', trigger: 'blur' },
          { validator: onCheckPhone, trigger: 'blur' }
        ],
        accontName: [
          { max: 64, message: '长度不可超过64个字符', trigger: 'blur' },
          { required: true, message: '常用打款人不允许为空', trigger: 'blur' }
        ],
        bank: [
          { max: 64, message: '长度不可超过64个字符', trigger: 'blur' },
          { required: true, message: '开户银行不允许为空', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '银行账户不允许为空', trigger: 'blur' },
          { max: 32, message: '长度不可超过32个字符', trigger: 'blur' }
        ]
      },
      isShow: true,
      selectData: {},
      detailData: {},
      noRepeat: false, // 编码唯一性
      isEditPage: false, // 编辑or新增
      checkAddress: {}
    }
  },
  mounted () {
    this.pageType = this.$route.params.id
    this.getProviderDetail()
  },
  methods: {
    // 获取编辑详情数据
    async getProviderDetail () {
      if (this.pageType && this.pageType !== 'new') {
        let {data} = await this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mvendors/getOne`, {id: this.pageType})
        this.detailData = data
        let tempObj = cloneDeep(this.detailData)
        this.getAccountInfo(tempObj)
        this.isEditPage = true
      }
    },
    onchangeAddress (val) {
      this.checkAddress = val
    },
    // 接口保存新建信息
    onSaveInfo (val) {
      let url = this.pageType === 'new' ? `/${this.$const.PREFIX.MAINDATA}/mvendors/add` : `/${this.$const.PREFIX.MAINDATA}/mvendors/update`
      let params = val
      params.type = 0 // [0]-供应商 【1】-代理商
      let accontInfo = []
      if (params.bank2 && params.accontName2 && params.account2) {
        accontInfo = accontInfo.concat({accontName2: val.accontName2, bank2: val.bank2, account2: val.account2})
        if (params.bank3 && params.accontName3 && params.account2) {
          accontInfo = accontInfo.concat({accontName3: val.accontName3, bank3: val.bank3, account3: val.account3})
          delete params.bank3
          delete params.accontName3
          delete params.account3
        }
        delete params.bank2
        delete params.accontName2
        delete params.account2
      }
      params.accontInfo = JSON.stringify(accontInfo)
      this.$http.post(url, params).then((res) => {
        if (res.result) {
          this.$message.success('操作成功')
          this.$router.push({name: 'provider'})
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    onCancelInfo () {
      this.$router.push({name: 'provider'})
    },
    // 回显多个账户信息
    getAccountInfo (tempObj) {
      if (tempObj.accontInfo) {
        tempObj.accontInfo = JSON.parse(tempObj.accontInfo)
        tempObj.accontInfo.map((val, index) => {
          let count = index + 2
          let name = {type: 'remit', label: '常用打款人', prop: 'accontName' + count, add: true, localIndex: count}
          let bank = {type: 'remit', label: '开户银行', prop: 'bank' + count, localIndex: count}
          let account = {type: 'remit', label: '银行账户', prop: 'account' + count, localIndex: count}
          this.list = this.list.concat(name, bank, account)
          this.detailData = Object.assign(tempObj, val)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>


